import {
  Authenticator,
  CheckboxField,
  useAuthenticator,
} from '@aws-amplify/ui-react';

import { Example } from '@/components/Example';

## Form Field Customization

The Authenticator allows for customization of multiple aspects of the form fields.
The sections below will describe several use cases, on how to modify these fields.

### Default international dial code

Default Dial code customization is available via the `defaultDialCode` prop in the `dialCodeOptions` parameter. Changing the `defaultDialCode` will change the default dial code in the phone number field for all forms, including the sign up, sign in, and forgot password forms.

The dial codes are a list of the [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) codes. For example, the United States is `us`, and Canada is `ca`.
A list of the codes can also be found in the `DialCode` class. 

```dart{5}

@override
Widget build(BuildContext context) {
  return Authenticator(
    dialCodeOptions: const DialCodeOptions(defaultDialCode: DialCode.jp),
    child: MaterialApp(
      builder: Authenticator.builder(),
      home: Scaffold(
        body: Center(
          child: Text('You are logged in!'),
        ),
      ),
    ),
  ),
}

```

### TOTP Issuer
The TOTP issuer is the name that will be shown in TOTP applications preceding the account name. In most cases, this should be the name of your app. For example, if your app is called "My App", your user will see "My App" - "username" in their TOTP app. This can be customized by adding the `TotpOptions` argument to the Authenticator component with a value for `issuer`. 

Note: Unless changed, the default issuer is the application name retrieved from the project configuration. The key for this value is `CFBundleDisplayName` on iOS found in `info.plist`, `application:label` on Android found in `AndroidManifest.xml`.

```dart{5}
@override
Widget build(BuildContext context) {
  return Authenticator(
    totpOptions: const TotpOptions(issuer: 'Authenticator Demo'),
    child: MaterialApp(
      builder: Authenticator.builder(),
      home: Scaffold(
        body: Center(
          child: Text('You are logged in!'),
        ),
      ),
    ),
  ),
}
```


